<template>
    <div class="l-rblock" >
        <el-input
                ref="main"
                :placeholder="$t(placeholder)"
                v-model="selectValue"
                :size="size"
                :clearable="disabled?false:clearable"
                :disabled="disabled"
                @focus="handleShow">
            <span slot="append"
                    @click="handleShow">
                <el-button slot="append" icon="el-icon-document"></el-button>
            </span>
        </el-input>
        <l-codetable-selectdialog 
            :visible.sync="dialogVisible"
            :dbCode="dbCode"
            :multiple="false"
            :isOkClose="false"
            @select="dbSelect"
            >
        </l-codetable-selectdialog>
    </div>
</template>
<script>
export default {
    name:'l-codetable-select',
    props: {
        value:{},
        size:String,
        placeholder:{
            type:String,
            default:'please select'
        },
        disabled:{
            type:Boolean,
            default:false
        },
        clearable:{
            type:Boolean,
            default:true
        },
        dbCode:String
    },
    data () {
        return {
            dialogVisible:false,
            tableColumns:{}
        }
    },
    computed:{
        selectValue:{
            get(){
                return this.value
            },
            set(val){
                this.$emit('input',val)
            }
        }
    },
    mounted () {
    },
    methods:{    
        handleChange(val){
            this.$emit('change',val)
        },
        handleShow(){
            if(this.dbCode){
                this.dialogVisible = true
            }
            else{
                 this.$message({
                    message: 'please select数据库',
                    type: 'warning'
                })
            }
        },
        async dbSelect(list,showLoading, hideLoading){
            showLoading('表数据加载')
            const table = {id:list[0].f_TableName,name:list[0].f_TableName,comment:list[0].f_Description}
            if(this.tableColumns[table.name]){
                table.columns = this.tableColumns[table.name]
            }
            else{
                const apiCodeTable = window.$api.data.codeTable
                const codeTables = await this.$awaitWraper(apiCodeTable.getList(this.dbCode,table.name))
                const codeTable = codeTables.find(t=>t.lr_db_codetableEntity.f_TableName == table.name)
                table.columns = codeTable.lr_db_codecolumnsList.map(t=>({
                    name:t.f_DbColumnName,
                    csType:t.f_CsType,
                    isIdentity:t.f_IsIdentity == 1,
                    isPrimary:t.f_IsPrimaryKey == 1,
                    isNullable:t.f_IsNullable == 1,
                    coment:t.f_Description?`${t.f_DbColumnName}(${t.f_Description})`:t.f_DbColumnName
                }))

                this.tableColumns[table.name] = table.columns
            }


            this.selectValue = table.name
            
            this.handleChange(table)
            this.dialogVisible = false
            hideLoading()
        }
    }
}
</script>